import { cloneDeep } from 'lodash'
import { useRoute } from 'vue-router'

// pro-plus-component的一些公用hooks配置

export const useListConfigHook = () => {
  // plus-table 的选择项及事件
  const gSelection = ref([])
  const gSelectionChange = (selections) => {
    gSelection.value = selections
  }

  // plus-table 的配置项
  const gTableBinds = (options) => {
    const {
      primaryKey = 'id',
      gTableData,
      gPageChange,
      gLoadingStatus,
      gReset,
      pageInfo,
      isSelection = true,
      index = true,
      gTotal,
      pageSizes = [5, 10, 20, 30, 50, 100],
      pageLayout = 'total, sizes, prev, pager, next, jumper',
      fieldMap
    } = options
    const route = useRoute()
    const binds = ref({
      titleBar: {
        title: route.meta?.title ?? '',
        refresh: true
      },
      rowKey:primaryKey,
      showOverflowTooltip: true,
      loadingStatus: gLoadingStatus.value,
      tableData: gTableData.value,
      hasIndexColumn: index,
      isSelection,
      onRefresh: gReset,
      pagination: {
        total: gTotal || 0,
        modelValue: {
          page: pageInfo.value[fieldMap.pageField],
          pageSize: pageInfo.value[fieldMap.pageSizeField]
        },
        pageSizes,
        layout: pageLayout
      },
      onPaginationChange: gPageChange
    })
    if (isSelection) {
      // 如果开启勾选，则绑定选项及事件
      Reflect.set(binds.value, 'onSelectionChange', gSelectionChange)
    }
    return binds.value
  }

  // 搜索区控制
  const gShowSearchForm = ref(true)
  // plus-search 的配置项
  const gSearchBinds = (options, exclude = []) => {
    const { gLoadingStatus, gReset, gGetList, gSearchForm } = options
    // 事件名称
    const excludeAbleKeys = ['search', 'reset']
    // 绑定事件名称
    const excludeAbleMap = {
      [excludeAbleKeys[0]]: 'onSearch',
      [excludeAbleKeys[1]]: 'onReset'
    }
    let _exclude = cloneDeep(exclude)
    if (exclude) {
      if (!Array.isArray(exclude)) {
        _exclude = [_exclude]
      }
    }

    const binds = ref({
      colProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6 },
      showNumber: 3,
      prevent: true,
      class: { 'plus-search--hide': !gShowSearchForm.value },
      onSearch: gGetList,
      onReset: gReset,
      searchLoading: gLoadingStatus,
      modelValue: gSearchForm,
      'onUpdate:modelValue': (value) => (gSearchForm.value = value),
      onKeyup: (e) => {
        if (e instanceof KeyboardEvent) {
          const { key } = e
          if (key.toLowerCase() === 'enter') {
            gGetList()
          }
        }
      }
    })
    // 排除内容
    _exclude.map((key) => {
      if (excludeAbleKeys.includes(key)) {
        console.log(excludeAbleMap[key])
        delete binds.value[excludeAbleMap[key]]
      }
    })

    return binds.value
  }


  return {
    gTableBinds,
    gSelection,
    gSelectionChange,
    gShowSearchForm,
    gSearchBinds
  }
}



export const useFormConfigHook = (allConfig ={},options= {})=>{

  const {gConfirmLoading,gTitle, gFormRule,gClose,gSubmitForm } = allConfig;
  const { dialogConfig={}, formConfig={ } } = options;
  //弹框配置
  const gDialogConfig = computed(() => ({
    draggable: true,
    title: gTitle.value,
    width: 500,
    confirmLoading:gConfirmLoading.value,
    alignCenter: true,
    onClose: gClose,
    onCancel:gClose,
    onConfirm: gSubmitForm,
    ...dialogConfig
  }))
  // 表单配置
  const gFormConfig = computed(() => ({
    rules: gFormRule.value,
    labelWidth: '120px',
    labelPosition: 'right',
    hasFooter: false,
    ...formConfig
  }))

  return {
    gDialogConfig,
    gFormConfig
  }
}
